<template>
	<view class="rescue-wrapper">
		<navBar title="道路救援" :showHome="false" :showBack="false" marginLeft="130px" />
		<view class="tab-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="tab-list">
				<view class="table-item" :class="{'active':currentTab == 1}" @click="handleTab(1)">普通道路</view>
				<view class="table-item" :class="{'active':currentTab == 2}" @click="handleTab(2)">高速道路</view>
			</view>
			<view class="order">
				<u-icon name="order" size="45" @click="lookOrderList"></u-icon>
			</view>
		</view>
		<view class="map-box">
			<map id="mapBox" style="width:100%; height:100%" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude"
				:show-compass="true" :enable-rotate="true" :markers="covers" :controls="controls" :show-location="true"
				:enable-poi="true" :show-scale="true" :scale="15">
			</map>
		</view>
		<view class="content">
			<view class="xy" @click="lookService">服务协议 <u-icon name="arrow-right" size="25"></u-icon></view>
			<view class="dw" @click="moveTolocation">
				<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/dw.png"
					mode=""></image>
			</view>
			<view class="has-order" v-if="rescuing">
				<view class="jyz">
					<view class="car">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescueing.png">
						</image>
					</view>
					<view class="title">您有道路救援单正在进行中</view>
				</view>
				<view class="btn">
					<u-button type="error" text="查看" shape="circle" size="mini" @click="goStatusDetail"></u-button>
				</view>
			</view>
			<view class="content-info" v-if="tabList.length == 0 || currentTab == 2">
				<view class="gs-title" v-if="currentTab == 2">因政策原因，无法实行高速救援，仅支持协助官方救援且费用需线下支付。</view>
				<view class="tip-title-no">
					请拨打<text class="txt"> 400 696 5399 </text>玲珑客服售后热线处理。
				</view>
				<view class="oprate-btn-no">
					<u-button type="primary" text="联系客服" plain shape="circle" @click="callPhone"></u-button>
				</view>
			</view>
			<view class="content-info" v-if="currentTab == 1&&tabList.length > 0">
				<view class="info-tab-box">
					<u-tabs :list="tabList" lineColor="#CF1A1B" :current="projectCurrent" lineWidth="60" lineHeight="4"
						:activeStyle="{
							color: '#CF1A1B'
						}" :inactiveStyle="{
							color: 'rgba(0,0,0,0.65)'
						}" itemStyle="height: 44px;" @change="handleProject">
					</u-tabs>
				</view>
				<view class="tip-title">
					若您的情况比较紧急，可直接联系<text class="txt"> 400 696 5399 </text>玲珑客服售后热线处理。
				</view>
				<view class="warning-text" v-if="currScope == 2">
					<u-icon name="error-circle" color="#CF1A1B" size="30"></u-icon>
					如果需地库牵引，每辆车单次会有额外费用，由救援师傅确认
				</view>
				<view class="adress-box" v-if="currScope == 1">
					<view class="adress-item" @click="setAddress(1)">
						<u-icon name="map" size="40"></u-icon>
						<view class="adress-info">{{ startAdress.title || startAdress.address }}</view>
						<view class="icon"><u-icon name="arrow-right" size="35"></u-icon></view>
					</view>
				</view>
				<view class="adress-box" v-else>
					<view class="adress-item" @click="setAddress(1)">
						<u-tag text="救" type="error" plain size="mini"></u-tag>
						<view class="adress-info">{{ startAdress.title || startAdress.address  }}</view>
						<view class="icon"><u-icon name="arrow-right" size="35"></u-icon></view>
					</view>
					<view class="line"></view>
					<view class="adress-item" @click="setAddress(2)">
						<u-tag text="终" type="success" plain size="mini"></u-tag>
						<view class="adress-info" v-if="endAdress.title||endAdress.address ">
							{{ endAdress.title || endAdress.address }}
						</view>
						<view class="adress-info" v-else>请选择地址</view>
						<view class="icon"><u-icon name="arrow-right" size="35"></u-icon></view>
					</view>
				</view>
				<view class="oprate-btn">
					<u-button type="primary" text="联系客服" plain shape="circle" @click="callPhone"></u-button>
					<u-button type="primary" text="确认位置,下一步" color="#CF1A1B" shape="circle" @click="nextTep"></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import navBar from '@/components/navBar.vue'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	export default {
		name: 'rescue',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo', 'getLocation', 'getTabBarIndex']),
			...mapState('user', ['userInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		watch: {
			// 监听点击的tabBar
		},
		data() {
			return {
				currentTab: 1,
				mapInfo: {
					latitude: '',
					longitude: ''
				},
				covers: [],
				// controls: [{ // 控件
				// 	id: 99,
				// 	position: { // 控件位置
				// 		left: 160,
				// 		top: 120
				// 	},
				// 	iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
				// }],
				startAdress: {
					location: {},
					address: '',
					title: ''
				},
				coversObj: {
					id: new Date().getTime(),
					latitude: '',
					longitude: '',
					iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jywz.png',
					width: "40",
					height: "40",
					callout: { //marker气泡
						content: '救援位置',
						color: "#000",
						bgColor: "#fff",
						borderRadius: 4,
						fontSize: 12,
						textAlign: "center",
						padding: 6,
						display: 'ALWAYS',
					}
				},
				mapContext: null,
				tabList: [],
				currScope: 1,
				endAdress: null,
				projectCurrent: 0,
				formDatas: {
					info: null
				},
				currentCover: null,
				rescuingData: null,
				rescuing: false //正在进行救援的项目
			}
		},
		created() {
			this.reverseAddress()
		},
		mounted() {
			this.mapContext = uni.createMapContext("mapBox", this);
		},
		methods: {
			// 初始化页面
			async initData() {
				//救援项目列表
				try {
					const res = await this.$request({
						method: 'GET',
						url: '/order-center/road/rescue/project/app-list',
						data: {
							pageSize: 10000,
							pageNum: 1
						}
					})
					this.tabList = res.datas.data
					if (this.tabList.length) {
						this.currScope = this.tabList[0].scope
						this.formDatas.info = this.tabList[0]		
					}
				} catch (e) {

				}
			},
			async getRscuing(type) {
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/roadRescueingList',
						data: {
							userId: this.getUserInfo.id
						}
					})
					this.rescuingData = res.datas
					this.rescuing = res.datas.length		
					if(this.rescuingData.length && type){
						uni.navigateTo({		
							url: `/rescuePack/rescueStatusDetail/index?id=${this.rescuingData[0].id}`
						})
					}
				} catch (e) {}
			},
			//查看服务协议
			lookService() {
				uni.navigateTo({
					url: '/rescuePack/serviceFile/index'
				})
			},
			//查看订单列表
			lookOrderList(){
				uni.navigateTo({
					url: '/rescuePack/rescueList/index?type=1'
				})
			},
			//tab切换
			handleTab(val) {
				this.currentTab = val
			},
			//服务项目切换
			handleProject(val) {
				this.formDatas.info = val
				this.projectCurrent = val.index
				this.currScope = val.scope
				if (this.currScope != 2 && this.covers.length == 2) {
					this.covers.splice(1, 1)
				}
				if (this.currScope == 2 && this.currentCover) {
					this.covers.splice(1, 1, this.currentCover)
				}
			},
			//电话
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
			},
			nextTep() {
				if (this.rescuing) {
                   this.goStatusDetail()
				} else {
					if (this.currScope == 2 && this.covers.length == 1) {
						this.$refs.uToast.show({
							type: 'default',
							message: '请选择拖车目的地！'
						})
						return false
					}
					uni.navigateTo({
						url: '/rescuePack/createRescueForm/index',
						success: (res) => {
							this.formDatas.startAdress = this.startAdress
							this.formDatas.endAdress = this.endAdress
							res.eventChannel.emit('confirmOrder', this.formDatas)
						}
					})
				}

			},
			//选择救援位置
			setAddress(val) {
				// val:1-救援地址，2-拖车目的地
				uni.navigateTo({
					url: `/rescuePack/selectRescueAddress/index?type=${val}`,
					events: {
						//获取下级页面传递回来的参数
						setRescueAddress: data => {
							console.log(data)
							let obj = JSON.parse(JSON.stringify(this.coversObj))
							obj.latitude = data.location.lat
							obj.longitude = data.location.lng
							obj.id = new Date().getTime()
							if (data.type == 1) {
								obj.callout.content = '救援位置'
								this.startAdress = data
								if(this.startAdress.title){
									this.startAdress.address = this.startAdress.address + this.startAdress.title
								}
								this.covers.splice(0, 1, obj)
							} else {
								this.endAdress = data
								obj.callout.content = '终点'
								obj.iconPath =
									'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyzd.png'
								if (this.covers.length == 2) {
									this.covers.splice(1, 1, obj)
								} else {
									this.covers.push(obj)
								}
								if(this.endAdress.title){
									this.endAdress.address = this.endAdress.address + this.endAdress.title
								}
								this.currentCover = obj
							}
							this.$forceUpdate()
							console.log(this.currScope)
						}
					}
				})
			},
			// 调用腾讯SDK获取当前定位城市信息
			reverseAddress() {
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				qqmapsdk.reverseGeocoder({
					success: async (res) => {
						this.startAdress = {}
						this.covers = []
						this.mapInfo['latitude'] = res.result.location.lat
						this.mapInfo.longitude = res.result.location.lng
						this.startAdress.location = res.result.location
						this.startAdress.address = res.result.address
						this.coversObj.latitude = res.result.location.lat
						this.coversObj.longitude = res.result.location.lng
						this.covers.push(this.coversObj)
						this.$forceUpdate()
					},
					fail: (error) => {
						console.error('error', error);
					},
				})
			},
			//移动到当前定位位置
			moveTolocation() {
				this.mapContext.moveToLocation({
					complete: res => {
						console.log('移动完成:', res)
					}
				})
			},
			//移动到指定位置
			moveNewTolocation() {
				// let mapObjs = uni.createMapContext('mapId', this)
				// this.mapContext.moveToLocation({
				// 	latitude: 25.01335131460308,
				// 	longitude: 121.53562913165706
				// }, {
				// 	complete: res => {
				// 		console.log('移动完成:', res)
				// 	}
				// })
			},
			//查看订单状态详情
			goStatusDetail() {
				uni.navigateTo({
					url: `/rescuePack/rescueStatusDetail/index?id=${this.rescuingData[0].id}`
				})
			}
		},

		onShow() {
			
		},
		onLoad() {
			// this.initData()
			// this.getRscuing()
		},
		onTabItemTap(item) {
		    //执行操作
			
			this.initData()
			this.getRscuing(1)
			this.reverseAddress()
			this.endAdress = null
			this.projectCurrent = 0
		}
	}
</script>

<style scoped lang="scss">
	.rescue-wrapper {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		/deep/ .u-tabs__wrapper__nav__line {
			margin-left: 15px;
			font-size: 14px;
		}

		.tab-box {
			width: 100%;
			position: relative;
			padding: 12rpx;
			height: auto;

			.tab-list {
				display: flex;
				display: flex;
				justify-content: center;

				.table-item {
					padding: 12rpx 32rpx;
					background: #fff;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #323233;
					transition: all .3s;
				}

				.active {
					background: #CF1A1B;
					color: #fff;
				}
			}

			.order {
				position: absolute;
				right: 34rpx;
				bottom: 10rpx;
				padding: 12rpx;
			}
		}

		.map-box {
			height: calc(100vh - 200rpx);
		}

		.content {
			position: absolute;
			background: transparent;
			padding: 22rpx;
			bottom: 10rpx;
			width: calc(100% - 44rpx);

			.dw {
				position: absolute;
				right: 20rpx;
				top: 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.xy {
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: bold;
				color: #333333;
				padding: 4rpx 10rpx;
				margin-bottom: 28rpx;
				background: #fff;
				width: 130rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				position: relative;
			}

			.has-order {
				padding: 6rpx 12rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 28rpx;
				border-radius: 16rpx;
				width: calc(100% - 20rpx);

				.jyz {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.car {
					width: 56rpx;
					height: 48rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333
					}
				}

				.btn {
					width: 120rpx;
				}
			}

			.content-info {
				padding: 6rpx 12rpx;
				width: calc(100% - 20rpx);
				background: #fff;
				border-radius: 10rpx;

				.info-tab-box {
					margin-bottom: 22rpx;
				}

				.tip-title {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 20rpx;

					.txt {
						color: #CF1A1B;
						font-weight: bold;
					}
				}

				.warning-text {
					display: flex;
					justify-content: flex-start;
					background: #FFFBE8;
					padding: 12rpx 28rpx;
					font-size: 11px;
					align-items: center;
					margin-bottom: 20rpx;

					/deep/ .u-icon {
						margin-right: 6rpx !important;
					}
				}

				.adress-box {
					background: #FAFAFA;
					border-radius: 8rpx;

					.adress-item {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 32rpx 28rpx;
						font-size: 15px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #333333;

						.icon {
							padding: 0 4rpx;
						}

						/deep/ .u-icon {
							margin-right: 10rpx !important;
						}

						/deep/ .u-tag {
							height: 32rpx !important;
							line-height: 32rpx !important;
							margin-right: 10rpx !important;
							padding: 0 4px !important;
						}

						.adress-info {
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: calc(100% - 50rpx);
						}
					}

					.line {
						width: 0;
						height: 42rpx;
						border-left: 0.5px solid #EBEBEB;
						margin-left: 48rpx;
					}
				}

				.oprate-btn {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					margin-top: 20rpx;

					/deep/ .u-button {
						width: 45%;
					}
				}

				.tip-title-no {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
					padding: 60rpx 0;

					.txt {
						color: #CF1A1B;
						font-weight: bold;
					}
				}

				.oprate-btn-no {
					margin-bottom: 10rpx;

					/deep/ .u-button {
						width: 90%;
					}
				}

				.gs-title {
					background: #FAFAFA;
					border-radius: 8rpx;
					padding: 32rpx 28rpx;
					font-size: 14px;
				}
			}
		}
	}
</style>